<!-- eslint-disable no-unused-vars -->
<template>
    <div class="app-container">
        <page-main>
            <div style="display: flex;">
                <div style="width: 20%;">
                    <TreeContainer ref="tree" :tree-list="treeList" :default-props="defaultProps" :node-key="nodeKey"
                                   :lazy="lazy" style="width: 100%;" @handleNodeClick="handleNodeClick"
                                   @addSameLevelNode="addSameLevelNode" @handleRightClick="handleRightClick"
                    />
                </div>
                <div style="width: 80%; margin-left: 30px;">
                    <filter-pane :filter-data="filterData" @filterMsg="filterMsg" />
                    <table-pane :data-source="dataSource" @changeSize="changeSize" @changeNum="changeNum" />
                </div>
            </div>
        </page-main>
        <!-- 添加或修改对话框右侧表格 -->
        <DialogFrom ref="DialogFrom" type="form" :visible.sync="open" :title="title" width="50%" :items="items"
                    :form="form" @submit="submitForm"
        />
        <!-- 添加或修改树节点 -->
        <DialogFrom ref="DialogFromTree" type="form" :visible.sync="openTree" :title="titleTree" width="50%"
                    :items="itemTree" :form="formTree" @cancel="cancelTree" @submit="submitFormTrue"
        />
    </div>
</template>

<script>
import filterPane from '@/components/TableDialog/filterPane'
import tablePane from '@/components/TableDialog/tablePane'
import TreeContainer from '@/components/TreeContainer'
// eslint-disable-next-line no-unused-vars
import { queryByEnumIdDelete, queryByEnumGroupIdSave, selectEnumByGroupIdSave, getcaidan, getquanxian, queryByEnumGroupIdDelete} from '@/util/api'

export default {
    name: 'DynamicShare',
    components: { filterPane, tablePane, TreeContainer},
    data() {
        return {
            // 搜索栏配置
            filterData: {
                timeSelect: false,
                elinput: [

                ]
            },
            leftNode: '',
            titleTree: '',
            lazy: false,
            defaultProps: {
                children: 'children',
                label: 'aliasName'
            },
            nodeKey: 'id', // 树的唯一标志，mid,也是treeList的每一条数据的唯一标志
            multipleSelection: [],
            title: '',
            treeList: [],
            open: false,
            // 表格配置
            dataSource: {
                tool: [{
                    name: '新增',
                    key: 1,
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '修改',
                    key: 1,
                    type: 'success',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '删除',
                    key: 1,
                    type: 'danger',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }],
                data: [], // 表格数据
                cols: [
                    {
                        label: '权限id',
                        prop: 'id'
                    },
                    {
                        label: '权限名称',
                        prop: 'authName'
                        // isImagePopover: true
                    },
                    {
                        label: '权限路径',
                        prop: 'path'
                    }
                ], // 表格的列数据
                handleSelectionChange: data => {
                    console.log(data, 'xiaohe')
                    this.multipleSelection = data
                },
                isSelection: true, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                loading: false, // loading
                pageData: {
                    total: 0, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1 // 页码
                },
                operation: {
                    // 表格有操作列时设置
                    label: '操作', // 列名
                    width: '100', // 根据实际情况给宽度
                    data: [ // 功能数组
                        {
                            type: 'icon', // 为icon则是图标
                            label: '推荐', // 功能
                            icon: 'iconfont recommend-btn icon-iconkuozhan_tuijianpre',
                            permission: '3010105', // 后期这个操作的权限，用来控制权限
                            handleRow: this.handleRow
                        },
                        {
                            label: '删除', // 操作名称
                            type: 'danger', // 为element btn属性则是按钮
                            permission: '2010702', // 后期这个操作的权限，用来控制权限
                            handleRow: this.handleRow
                        }
                    ]
                }
            },
            // 弹窗表单参数
            form: {
                enumValue: '',
                enumName: '',
                enumDesc: '',
                displayOrder: '',
                enumId: ''
            },
            formTree: {
                // 枚举分组名称
                groupName: '',
                // 枚举分组别名：
                aliasName: '',
                // 枚举类型
                enumType: '',
                // 排序
                displayOrder: '',
                // 枚举扩展信息：
                sqlInfo: '',
                groupId: '',
                parentId: ''
            },
            // 弹窗输入框配置
            items: [
                {
                    elName: 'el-input',
                    span: 12,
                    label: '枚举值',
                    prop: 'enumValue',
                    rules: [
                        {
                            required: false,
                            message: '请输入租户账号(手机号)',
                            trigger: 'blur'
                        }
                    ],
                    attrs: {
                        placeholder: '请输入租户账号(手机号)'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '枚举名称',
                    prop: 'enumName',
                    attrs: {
                        placeholder: '请输入租户密码'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '描述',
                    prop: 'enumDesc',
                    attrs: {
                        placeholder: '请输入租户密码'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '排序',
                    prop: 'displayOrder',
                    attrs: {
                        placeholder: '请输入租户密码'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                }

            ],
            // shu弹窗输入框配置
            itemTree: [
                {
                    elName: 'el-input',
                    span: 12,
                    label: '枚举分组名称',
                    prop: 'groupName',
                    rules: [
                    ],
                    attrs: {
                        placeholder: '请输入枚举分组名称'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '枚举分组别名',
                    prop: 'aliasName',
                    attrs: {
                        placeholder: '请输入枚举分组别名'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-select',
                    span: 12,
                    label: '枚举类型',
                    prop: 'enumType',
                    options: [
                        {
                            label: '数据库枚举',
                            value: 'DataView'
                        },
                        {
                            label: '自定义枚举',
                            value: 'Custom'
                        }
                    ],
                    attrs: {
                        placeholder: '请选择枚举类型',
                        multiple: false
                    },
                    on: {
                        change: e => {
                            console.log('-----------')
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '排序',
                    prop: 'displayOrder',
                    attrs: {
                        placeholder: '请输入排序'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },

                {
                    elName: 'el-input',
                    span: 12,
                    label: '枚举扩展信息',
                    prop: 'sqlInfo',
                    attrs: {
                        placeholder: '请输入枚举扩展信息'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                }

            ],
            openTree: false,
            dialogAdd: false,
            msg: {},
            rowID: '',
            ischuan: true
        }
    },
    created() {
        // this.getList()
        this.getcaidan()
    },
    methods: {
        filterMsg() {

        },
        changeSize() {

        },
        changeNum() {

        },
        handleRightClick(obj) {
            this.leftNode = obj.groupId
        },
        // 点击树节点传递的方法
        handleNodeClick(data) {
            this.rowID = data.groupId
            this.getupdate()
        },
        // 树右键新增
        addSameLevelNode(data, node) {
            this.titleTree = data
            if (node == '同级新增') {
                this.leftNode = '1749709796997419010'
            }
            if (data == '编辑') {
                this.ischuan = false
                for (let i in this.formTree) {
                    for (let j in node) {
                        if (i == j) {
                            this.formTree[i] = node[j]
                        }
                    }
                }
                console.log(this.formTree, 'node')
            } else if (data == '删除') {
                this.$confirm('此操作将永久删除该菜单信息, 是否继续?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                    // center: true
                })
                    .then(async() => {
                        let id = [node.groupId]
                        // console.log(id)

                        const res = await queryByEnumGroupIdDelete(id)
                        if (res.data.code === 200) {
                            // 更新
                            this.getcaidan()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.tableData = []
                            this.totalExp = 0
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            })
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
                return false
            }
            this.openTree = true
        },
        /**
         * 树弹窗返回
         */
        cancelTree() {
            this.openTree = false
            this.formTree = {
                // 枚举分组名称
                groupName: '',
                // 枚举分组别名：
                aliasName: '',
                // 枚举类型
                enumType: '',
                // 排序
                displayOrder: '',
                // 枚举扩展信息：
                sqlInfo: '',
                groupId: '',
                parentId: ''

            }
        },
        getcaidan: async function() {
            let me = this
            // 获取角色菜单
            const res = await getcaidan()
            // me.treeList = res.data.data
            // res.data.data.forEach(item => {
            //     item.authName = item.roleName
            // })
            me.treeList = res.data.data
        },

        // 获取树数据
        getupdate: async function() {
            this.dataSource.data = []
            const res1 = await getquanxian()
            if (res1.data.data.length != 0) {
                this.dataSource.data = res1.data.data
            } else {
                this.dataSource.data = []
            }
        },
        // 懒加载树
        async loadNode(node, resolve) {
            console.log(node, 'skdfneidnio')
            let parentId = ''
            parentId = node.id
            let param = {
                'parentId': parentId
            }
            const res = await getcaidan(param)
            if (node.level > 1) return resolve([])
            setTimeout(() => {
                resolve(res.data.data)
            }, 500)
        },
        // 右侧表格增删改
        handleAdd(data) {
            this.title = data
            if (data === '新增') {
                // console.log(userInfo)
                this.open = true
                for (let i in this.form) {
                    this.form[i] = ''
                }
                console.log(this.form, 'hzl')
            } else if (data === '修改') {
                this.open = true
                for (let i in this.form) {
                    this.form[i] = this.multipleSelection[0][i]
                }
            } else {
                this.$confirm('此操作将永久删除信息, 是否继续?', '提示', {
                    cancelButtonClass: 'btn-custom-cancel',
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true
                })
                    .then(async() => {
                        this.queryByEnumIdDeleteData()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }
        },
        // 右侧删除
        async queryByEnumIdDeleteData() {
            console.log(this.multipleSelection)
            let param = []
            this.multipleSelection.forEach(item => {
                param.push(item.enumId)
            })
            let res = await queryByEnumIdDelete(param)
            if (res.data.data) {
                this.getupdate()
                this.$message.success('删除成功')
            }
        },
        // 表格的新增在这  修改也在这里 符合修改的数据格式就行
        async submitForm() {
            if (this.form.enumName != '' && this.form.displayOrder != '' && this.form.enumDesc != '' && this.form.enumValue != '') {
                this.form.enumGroupId = this.rowID
                this.hadleAddShow = false
                const res = await selectEnumByGroupIdSave(this.form)
                if (res.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                }
                // 更新列表
                this.getupdate()
                this.form = {
                    enumValue: '',
                    enumName: '',
                    enumDesc: '',
                    displayOrder: ''
                }
                this.open = false
            } else {
                this.$message({
                    type: 'error',
                    message: '请输入必填项'
                })
            }
        },
        // 树节点的新增在这里 修改也在这需要传入父子节点id
        async submitFormTrue() {
            if (this.formTree.aliasName != '' && this.formTree.enumType != '') {
                if (this.ischuan && this.formTree.parentId != '') {
                    this.formTree.parentId = this.leftNode
                }
                const res = await queryByEnumGroupIdSave(this.formTree)
                if (res.data.code == 200) {
                    // 更新列表
                    this.getcaidan()
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                    this.openTree = false
                    this.formTree = {
                        // 枚举分组名称
                        groupName: '',
                        // 枚举分组别名：
                        aliasName: '',
                        // 枚举类型
                        enumType: '',
                        // 排序
                        displayOrder: '',
                        // 枚举扩展信息：
                        sqlInfo: '',
                        groupId: '',
                        parentId: ''

                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '保存失败'
                    })
                }
            } else {
                this.$message({
                    type: 'error',
                    message: '请输入必填项'
                })
            }
        }
    }
}
</script>
